Vue 实现复制功能,不需要任何结构内容直接复制

介绍:

在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现。

在查阅资料时候,发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容,感觉很不方便。

使用:

methods: {
    copyShaneUrl(shareLink){
       var input = document.createElement("input");     // 直接构建input
       input.value = shareLink;   // 设置内容
       document.body.appendChild(input);        // 添加临时实例
       input.select();      // 选择实例内容
       document.execCommand("Copy");     // 执行复制
       document.body.removeChild(input);  // 删除临时实例
    }
  }

方法代码如上,然后绑定需要执行当前方法的按钮

<button @click="copyShaneUrl('baidu.com')">复制分享链接</button>

 

Vue中,复制Excel表格的内容并粘贴到Element UI的`el-table`组件中,可以借助一些库如clipboard.js来处理复制操作,然后利用`v-model`双向数据绑定将数据同步到表格中。这里是一个简单的步骤概述: 1. 首先,你需要安装必要的依赖库,例如`vue`, `element-ui`, 和 `clipboardjs`。如果还没有安装,可以在项目目录下运行`npm install element-ui clipboard-js`。 2. 引入所需的库到你的组件中,并导入VueClipboard插件: ```javascript import Vue from 'vue' import ElementUI from 'element-ui'; import ClipboardJS from 'clipboard'; Vue.use(ElementUI); Vue.use(ClipboardJS); ``` 3. 创建一个Vue实例,并配置复制事件: ```javascript export default { data() { return { excelData: [], // 假设这是你要复制的数据 copied: false, // 标记是否已复制 } }, mounted() { this.copyToClipboard(); }, methods: { copyToClipboard() { const clipboard = new ClipboardJS('.your-copy-button'); clipboard.on('success', () => { this.copied = true; setTimeout(() => { this.copied = false; // 如果需要清除复制标志,可以在这儿清除 }, 1000); // 或者设置自定义时间清除 }); }, handlePaste(event) { event.preventDefault(); // 阻止浏览器默认粘贴行为 if (this.copied) { // 检查是否有复制的数据 let pastedData = event.clipboardData.getData('text/plain'); // 获取粘贴的数据 // 将pastedData解析成表格需要的格式并赋值给this.excelData // 这部分取决于你的excel数据结构 this.excelData = processPastedData(pastedData); } } }, watch: { excelData(newData) { // 当excelData变化时更新el-table this.$nextTick(() => { this.$refs.yourTableData.setDataSource(this.excelData); }); } }, template: ` <!-- ... --> <div> <button class="your-copy-button" @click="copyToClipboard">复制</button> <el-table :data="excelData" ref="yourTableData"></el-table> </div> <!-- ... --> `, } ``` 4. 在模板中添加一个复制按钮,并监听其点击事件。当用户点击复制按钮时,触发`copyToClipboard`方法。 注意:这个例子假设你已经有一个`<el-table>`并且有对应的`ref`引用(如`ref="yourTableData"`),并且你有一个函数`processPastedData`用于解析粘贴过来的数据。实际操作中,你需要根据你的数据结构调整这部分代码。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值